<template>
  <div class="EIManage-container">
    <page-header type="EIInfo" @reset="resetSeach" @searchChange="searchData" />
    <pagination-table
      ref="ptable"
      :tableData="pageData.listData"
      @pagination="paginaChange"
    >
      <XMTableColumn label="患者姓名" prop="name"></XMTableColumn>
      <!-- <XMTableColumn label="患者年龄" prop="birthday"></XMTableColumn> -->
      <XMTableColumn label="患者性别" prop="sex">
        <template #default="scope">
          {{ scope.row.sex === 1 ? '男' : '女' }}
        </template>
      </XMTableColumn>
      <!-- <XMTableColumn label="年龄" prop="age"></XMTableColumn> -->
      <!-- <XMTableColumn label="体重" prop="weight"></XMTableColumn> -->
      <XMTableColumn label="身高(cm)" prop="height"></XMTableColumn>
      <XMTableColumn label="体重(kg)" prop="weight"></XMTableColumn>
      <XMTableColumn label="出生日期" prop="birthday"></XMTableColumn>
      <XMTableColumn label="家长姓名" prop="parentName"></XMTableColumn>
      <XMTableColumn label="手机号" prop="phone"></XMTableColumn>

      <XMTableColumn label="代填人" prop="replaceName"></XMTableColumn>
      <XMTableColumn label="代填人手机号" prop="replacePhone"></XMTableColumn>
      <XMTableColumn label="问卷结果" prop="flowResult">
        <template #default="scope">
          {{
            scope.row.flowResult !== null
              ? scope.row.flowResult === 1
                ? '疑似'
                : '健康'
              : ''
          }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="患者备注" prop="remark"></XMTableColumn>
      <XMTableColumn label="医生备注" prop="suggest"></XMTableColumn>
      <XMTableColumn label="状态" prop="status">
        <template #default="scope">
          {{ scope.row.status === 1 ? '已建档' : '未建档' }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="填写日期" prop="createTime"></XMTableColumn>
      <XMTableColumn label="操作" min-width="100">
        <template #default="scope">
          <div class="operation">
            <el-button size="small" @click="show(scope.row)">
              查看问卷
            </el-button>
            <el-button size="small" type="primary" @click="edit(scope.row)">
              {{ scope.row.status === 1 ? '患者列表' : '快速建档' }}
            </el-button>
          </div>
        </template>
      </XMTableColumn>
    </pagination-table>
    <!-- 封装弹窗 -->
    <el-dialog
      v-model="isVisible"
      width="600px"
      @close="closeDialog"
      custom-class="init_body"
    >
      <el-radio-group v-model="tabPosition" style="margin-bottom: 10px">
        <el-radio-button label="index0">问卷</el-radio-button>
        <template v-if="soundData">
          <el-radio-button label="index1">背面</el-radio-button>
          <el-radio-button label="index2">正面</el-radio-button>
          <el-radio-button label="index3">视频</el-radio-button>
        </template>
      </el-radio-group>
      <el-scrollbar height="400px">
        <template v-if="tabPosition === 'index0'">
          <el-form :model="showForm" label-position="top">
            <checkbox-form
              v-for="(item, index) in showForm"
              :key="index"
              v-model="item.actives"
              prop="attr"
              :title="item.title"
              :items="item.items"
            ></checkbox-form>
          </el-form>
        </template>
        <template v-if="tabPosition === 'index1'">
          <el-table :data="soundData.sound[0].value" border style="width: 100%">
            <XMTableColumn prop="name" label="录制点" width="100" />
            <XMTableColumn prop="url" label="查看" width="170">
              <template #default="scope">
                <el-button
                  :type="scope.row.url ? 'primary' : 'info'"
                  @click="playVideo(scope.row.url)"
                >
                  {{ scope.row.url ? '点击播放' : '暂无数据' }}
                </el-button>
              </template>
            </XMTableColumn>
          </el-table>
        </template>
        <template v-if="tabPosition === 'index2'">
          <el-table :data="soundData.sound[1].value" border style="width: 100%">
            <XMTableColumn prop="name" label="录制点" width="100" />
            <XMTableColumn prop="url" label="查看" width="170">
              <template #default="scope">
                <el-button
                  :type="scope.row.url ? 'primary' : 'info'"
                  @click="playVideo(scope.row.url)"
                >
                  {{ scope.row.url ? '点击播放' : '暂无数据' }}
                </el-button>
              </template>
            </XMTableColumn>
          </el-table>
        </template>
        <template v-if="tabPosition === 'index3'">
          <div>
            <el-button
              :type="soundData.video.url ? 'primary' : 'info'"
              @click="playVideo(soundData.video.url)"
            >
              {{ soundData.video.url ? '点击播放' : '暂无数据' }}
            </el-button>
          </div>
        </template>
      </el-scrollbar>
      <template #footer>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </template>
    </el-dialog>
    <add-patient
      ref="addRef"
      title="快速建档"
      @success="addSucess"
    ></add-patient>
    <el-dialog
      width="30%"
      title="播放肺音"
      v-model="isVisble"
      @closed="diaglogCloed"
    >
      <x-m-player ref="refPalyer" :url="videoUrl"></x-m-player>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isVisble = false">取 消</el-button>
          <el-button type="primary" @click="isVisble = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import { ref, reactive } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import moment from 'moment'
  import { flowDetailes } from '@/api/modules/flow.js'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated.js'
  import { ElMessage } from 'element-plus'
  import XMPlayer from '@/components/XMPlayer'
  import { useQuestionnaire } from '@/views/workbench/hooks/useQuestionnaire.js'
  const pageData = reactive({
    listData: [],
    search: { pageIndex: 1, pageSize: 5 },
  })
  const ptable = ref(null)

  const resetSeach = () => {
    pageData.search = { pageIndex: 1, pageSize: 5 }
    ptable.value.clearData()
    loadData()
  }
  const searchData = function (params) {
    pageData.search.name = params.value1
    pageData.search.startDay = params.value2.start
      ? moment(params.value2.start).format('YYYY-MM-DD')
      : null
    pageData.search.endDay = params.value2.end
      ? moment(params.value2.end).format('YYYY-MM-DD')
      : null
    pageData.search.status = params.value3
    pageData.search.ptNo = params.value4
    pageData.search.flowReslut = params.value6
    loadData(pageData.search)
  }
  const paginaChange = function (params) {
    pageData.search.pageIndex = params.current
    pageData.search.pageSize = params.pageSize
    pageData.search.orderType = params.orderType
    loadData(pageData.search)
  }

  const route = useRoute()
  const loadData = async () => {
    pageData.listData = await flowDetailes({
      ...pageData.search,
      flowId: route.query.flowId,
    })
  }
  const router = useRouter()
  const pref = ref()
  const edit = function (params) {
    if (params.status !== 1) {
      if (params.sex === 2) params.sex = 0
      addRef.value.init({ obj: params })
      return
    }
    // 建档了 就去患者列表页面
    router.push({ name: 'patientList' })
  }

  const showForm = ref({})
  const isVisible = ref(false)
  const tabPosition = ref(1)
  const soundData = ref({})
  const show = function (params) {
    const { wjxData, soundUrl } = params
    if (!wjxData && !soundUrl) {
      ElMessage.info('未有任何预览数据')
      soundData.value = {}
      return
    }
    soundData.value = soundUrl ? JSON.parse(params.soundUrl) : null

    const { previewData } = useQuestionnaire()
    showForm.value = previewData(params.wjxData)

    tabPosition.value = 'index0'
    isVisible.value = true
  }

  const closeDialog = function () {
    isVisible.value = false
    showForm.value = {}
  }

  const addRef = ref(null)
  const reception = function (params) {
    addRef.value.init({ id: params.id })
  }
  onMountedOrActivated(() => {
    loadData(pageData.search)
  })

  const addSucess = function (data) {
    loadData()
  }

  const isVisble = ref(false)
  const videoUrl = ref()
  function playVideo(url) {
    if (url) {
      videoUrl.value = url
      isVisble.value = true
    } else {
      console.log('点击了暂无数据')
    }
  }
  const refPalyer = ref(null)
  const diaglogCloed = function () {
    if (refPalyer.value) refPalyer.value.pause()
  }
</script>

<style lang="scss">
  .EIManage-container {
    margin: 32px;
    background-color: white;

    .el-button {
      margin: 3px 3px;
    }

    .operation {
      display: flex;
      flex-direction: column;
    }

    .el-dialog.init_body {
      .el-dialog__body {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
      }

      .el-checkbox-group {
        pointer-events: none;
      }
    }
  }
</style>
